<template>
  <view class="new_main">
    <view class="nav">
      <u-tabs
        :list="tabList"
        @click="onClick"
        :current="currentIndex"
        :scrollable="false"
        :activeStyle="{
          color: '#0177FD',
          fontSize: '28rpx',
          transform: 'scale(1)',
        }"
        :inactiveStyle="{
          color: '#333333',
          fontSize: '28rpx',
          transform: 'scale(1)',
        }"
        :itemStyle="{ height: '90rpx' }"
      >
      </u-tabs>
    </view>
    <scroll-view
      scroll-y="true"
      style="height: calc(100vh - 90rpx)"
      :refresher-threshold="50"
      :refresher-background="'#f4f4f4'"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="loadMore"
    >
      <view class="goods_list">
        <view
          class="goods_item"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="goGoodsDetail(item.id)"
        >
          <image class="goods_img" :src="item.pic" mode="aspectFill" />
          <view class="goods_info">
            <view class="info_left">
              <view class="goods_name">{{ item.name }}</view>
              <view class="goods_pic">￥{{ item.price }}</view>
            </view>
            <view class="goods_sold_out">已售：{{ item.sale }}</view>
            <view class="goods_status">
              <view class="status_top">
                <view class="top_dot" v-if="item.status == 1"></view>
                <view class="top_txt" :class="item.status == 1 ? '' : 'c999'">{{
                  item.status == 1 ? "售卖中" : "已下架"
                }}</view>
              </view>
              <view class="status_btn" @click.stop="showModalFn(item)">{{
                item.status == 1 ? "下架" : "上架"
              }}</view>
            </view>
          </view>
        </view>

        <view
          v-if="goodsList.length === 0 && loading == false"
          class="empty_wrap"
        >
          <image
            class="empty_img"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
          ></image>
          <text class="tips">暂无商品</text>
        </view>
      </view>
    </scroll-view>

    <u-modal
      :show="showModal"
      :content="content"
      width="500rpx"
      confirmText="确定"
      cancelText="取消"
      :showCancelButton="true"
      @confirm="editGoods"
      @cancel="showModal = false"
    ></u-modal>
  </view>
</template>

<script>
import { getGoodsList, editGoods } from "@/static/js/enterpriseServer/goods.js";
export default {
  data() {
    return {
      tabList: [
        {
          name: "全部",
        },
        {
          name: "售卖中",
        },
        {
          name: "已下架",
        },
      ], //tab列表
      currentIndex: 0, //当前选中的tab
      goodsList: [], // 商品列表
      page: 1, // 页码
      pageSize: 10, // 每页条数
      isRefreshing: false,
      listStatus: "noMore", //更多
      showModal: false, //弹窗
      chooseGoodsItem: {}, //选择的商品
      content: "", //弹窗内容
      loading: false, //加载中
    };
  },
  onLoad(e) {
    this.getList();
  },
  methods: {
    //tab切换
    onClick(e) {
      this.currentIndex = e.index;
      this.loading = true;
      this.goodsList = [];
      this.getList();
    },

    //下拉刷新
    refresherrefresh() {
      this.isRefreshing = true;
      this.loading = true;
      this.page = 1;
      this.goodsList = [];
      this.getList();
    },

    //上拉加载
    loadMore() {
      if (this.listStatus == "more") {
        this.loading = true;
        this.page++;
        this.getList();
      }
    },

    // 获取商品列表
    getList() {
      getGoodsList({
        page: this.page,
        pageSize: this.pageSize,
        status: this.currentIndex == 0 ? "" : this.currentIndex,
      }).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.loading = false;
          if (this.page == 1) {
            this.goodsList = res.data;
          } else {
            this.goodsList = this.goodsList.concat(res.data);
          }
          this.isRefreshing = false;
          this.listStatus = res.data.length < this.pageSize ? "noMore" : "more";
        } else {
          console.log(res.msg);
          this.loading = false;
        }
      });
    },

    //显示弹窗
    showModalFn(e) {
      this.content =
        e.status == 1 ? "确定下架该商品吗？" : "确定上架该商品吗？";
      this.showModal = true;
      this.chooseGoodsItem = e;
    },

    // 编辑商品
    editGoods() {
      let item = this.chooseGoodsItem;
      let status = item.status == 1 ? 2 : 1;
      editGoods({
        id: item.id,
        status: status,
      }).then((res) => {
        if (res.code === 1) {
          uni.showToast({
            title: item.status == 1 ? "下架成功" : "上架成功",
            icon: "none",
          });
          this.showModal = false;
          this.getList();
        } else {
          console.log(res.msg);
        }
      });
    },

    //跳转商品详情
    goGoodsDetail(id) {
      uni.navigateTo({
        url: "/enterpriseServer/productInfo/index?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f4f4f4 !important;
}
.new_main {
  .nav {
    background: #fff;
  }

  .goods_list {
    margin-top: 15rpx;
    .goods_item {
      display: flex;
      align-items: center;
      background: #fff;
      margin-bottom: 19rpx;
      padding: 33rpx 30rpx 66rpx 30rpx;

      .goods_img {
        width: 110rpx;
        height: 110rpx;
        margin-right: 23rpx;
        border-radius: 10rpx;
      }

      .goods_info {
        width: calc(100% - 110rpx - 23rpx);
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info_left {
          width: 200rpx;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .goods_name {
            font-weight: 600;
            font-size: 30rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }

        .goods_sold_out {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }

        .goods_status {
          display: flex;
          flex-direction: column;
          align-items: center;

          .status_top {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 26rpx;
            color: #222222;

            .top_dot {
              width: 8rpx;
              height: 8rpx;
              background: #22b63b;
              border-radius: 50%;
              margin-right: 13rpx;
            }
          }

          .status_btn {
            width: 152rpx;
            height: 55rpx;
            border-radius: 86rpx;
            border: 1rpx solid #a4a4a4;
            text-align: center;
            line-height: 55rpx;
            margin: 40rpx 0 -40rpx 0;
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
          }
        }
      }
    }

    .empty_wrap {
      display: flex;
      flex-direction: column;
      padding: 80rpx 0 100rpx;
      align-items: center;
      .empty_img {
        width: 415rpx;
        height: 415rpx;
      }

      .tips {
        margin-top: 10rpx;
        font-size: 30rpx;
        color: #999;
      }
    }
  }
}

/deep/.u-modal__content__text {
  text-align: center;
}
.c999 {
  color: #999;
}
</style>
